<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>选项卡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        main {
            width: 500px;
            height: 400px;
            border: 1px solid;
            margin: 0 auto;
        }

        section{
            width: 500px;
            height: 50px;
            background-color: black;
        }

        div {
            width: 100px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            color: white;
            text-align: center;
        }
        /* .active {
            background-color: #aaa;
            color: black;
        } */

        /* ul:nth-of-type(1) {
            display: block;
        }

        ul {
            display: none;
        } */
    </style>
</head>

<body>
    <main>
        <section>
            <div>第一天</div>
            <div>第二天</div>
            <div>第三天</div>
        </section>
        <span>
        <ul>
            <li>这是一段新闻1，新闻的标题1</li>
            <li>这是一段新闻2，新闻的标题2</li>
            <li>这是一段新闻3，新闻的标题3</li>
            <li>这是一段新闻4，新闻的标题4</li>
            <li>这是一段新闻5，新闻的标题5</li>
            <li>这是一段新闻6，新闻的标题6</li>
        </ul>
        <ul>
            <li>这是一段新闻1，新闻的标题1</li>
            <li>这是一段新闻2，新闻的标题2</li>
            <li>这是一段新闻3，新闻的标题3</li>
        </ul>
        <ul>
            <li>这是一段新闻1，新闻的标题1</li>
            <li>这是一段新闻2，新闻的标题2</li>
            <li>这是一段新闻3，新闻的标题3</li>
            <li>这是一段新闻4，新闻的标题4</li>
        </ul>
   </span>
    </main>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    // var divs = document.querySelectorAll('div');
    // var uls = document.querySelectorAll('ul');
    // for (var i = 0; i < divs.length; i++) {
    //     divs[i].index = i;
    //     divs[i].onmouseover = function () {
    //         for (var i = 0; i < divs.length; i++) {
    //             divs[i].className = '';
    //             uls[i].style.display = 'none';
    //         }
    //         this.className = 'active';
    //         uls[this.index].style.display = 'block';
    //         divs[this.innerText] = uls[this.index];
    //     }
    // }

    // index = 0;
    $('div').mouseover(function () {
        $(this).css('background-color','#aaa').css('color','black')
        .siblings().css('background-color','#000').css('color','#fff');

        $('ul').eq($(this).index()).css('display', 'block')
        .siblings().css('display', 'none');
    });
    // ,function () {
    //          $('div').eq(index).css('background-color','#aaa');
    //     $('ul').css('display', 'none').eq(index).css('display', 'block');
    // });
</script>